import React from "react";

import { useTranslation } from "react-i18next";

import Card from "@material-ui/core/Card";

import PerfectScrollbar from "react-perfect-scrollbar";

import ActivityItem from "./components/ActivityItem";
import { Typography } from "@material-ui/core";

const bitcoinIcon = require("./../../assets/images/ActivityBox/bitcoin.svg");

export default function ActivityBox() {
  const { t } = useTranslation();
  return (
    <>
      <Card className="activity-box width-102">
        <Card className="card-header ">
          <Typography
            variant="h6"
            className="font-size-xxl ml-2 mt-2"
            color="textPrimary"
          >
            {t("dashboard:my_activity")}
          </Typography>
        </Card>
        <div className="divider" />
        <div>
          <img src={bitcoinIcon} alt="bitcoin" className="bitcoin-icon" />
          <div className="scroll-area ">
            <PerfectScrollbar>
              <div className="timeline-list timeline-list-offset timeline-list-offset-dot py-3">
                <ActivityItem
                  activityDate={"18 Feb"}
                  activityContent={
                    " You uploaded the following documents onto the cryptoplatform:"
                  }
                  activityLabel={"Uploaded document"}
                />

                <ActivityItem
                  activityDate={"16 Feb"}
                  activityContent={
                    " You uploaded the following documents onto the cryptoplatform:"
                  }
                  activityLabel={"Uploaded document"}
                />

                <ActivityItem
                  activityDate={"14 Feb"}
                  activityContent={
                    " You uploaded the following documents onto the cryptoplatform:"
                  }
                  activityLabel={"Uploaded document"}
                />

                <ActivityItem
                  activityDate={"12 Feb"}
                  activityContent={
                    " You uploaded the following documents onto the cryptoplatform:"
                  }
                  activityLabel={"Uploaded document"}
                />
              </div>
            </PerfectScrollbar>
          </div>
        </div>
      </Card>
    </>
  );
}
